<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.101.0">
    <title>软约管理系统-登录</title>

    <!-- Bootstrap core CSS -->
    <link href="./PwYeMian/bootstrap-4.6.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="./PwYeMian/element/index.css" rel="stylesheet">

    <style>
        @font-face {
            font-family: 'DingTalkJinBuTi';
            src: url('./ShowScore/fonts/DingTalk\ JinBuTi.ttf') format('truetype');
            /* font-family: '方正汉真广标简体'; */
            /* src: url('./ShowScore/fonts/方正汉真广标简体.TTF') format('truetype'); */
            font-weight: normal;
            font-style: normal;
        }

        body {
            font-family: 'DingTalkJinBuTi', sans-serif !important;
            margin: 0;
            padding: 0;
            /* padding-right: px; */
            background-color: #f0f4e2 !important;
        }

        /* .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        } */

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .text-center {
            text-align: center;
        }

        .mb-4, .my-4 {
            margin-top: -30px;
        }

        .form-label-group{
            margin: 50px 0 18px 0 !important;
        }

        .form-label-group input, .form-label-group label {
            border-radius: 30px;
        }

        .btn-block {
            border-radius: 15px;
        }
        
        .btn-primary {
            color: #000000;
            background-color: #d0e78e;
            border-color: #e3dbdb;
        }

        .checkbox label {
            display: flex;
            align-items: center;
        }

        .checkbox input[type="checkbox"] {
            accent-color: #007bff; /* 设置复选框的颜色 */
            width: 20px; /* 设置复选框的宽度 */
            height: 20px; /* 设置复选框的高度 */
            margin-left: 20px;
            margin-right: 10px; /* 增加复选框与文本之间的间距 */
        }

        .checkbox label span {
            font-size: 80px !important; /* 设置标签文本的字体大小 */
        }

        .form-control:focus + label,
        .form-control:not(:placeholder-shown) + label {
            opacity: 0; /* 直接隐藏标签 */
        }

        .form-label-group input:not(:placeholder-shown) {
            padding-top: 0.25rem !important;
        }
    </style>

    <!-- Custom styles for this template -->
    <link href="./PwYeMian/assets/css/login.css" rel="stylesheet">
</head>

<body>
    <div id="app" class="form-signin">
        <div class="text-center mb-4">
            <img class="mb-4" src="./PwYeMian/assets/images/login-img.gif" alt="" width="220" height="220">
            <p style="margin-top: -96px;">_____________________________________</p>
            <h1 class="h3 mb-3 font-weight-normal" style="font-size: 18px;">双体软件精英产业学院</h1>
            <h1 class="h3 mb-3 font-weight-normal" style="font-size: 38px; font-weight: bold;">我与软件有个约会</h1>
            <h1 class="h3 mb-3 font-weight-normal" style="font-size: 32px; font-weight: bold; margin-bottom: 40px !important;">评分系统</h1>
        </div>

        <div class="form-label-group">
            <input type="text" id="inputEmail" class="form-control" placeholder="请输入工号" v-model="tempUser.judUsername"
                required autofocus @keyup.enter="login">
            <label for="inputEmail">请输入您的账号</label>
        </div>

        <div class="form-label-group">
            <input type="password" id="inputPassword" class="form-control" placeholder="请输入手机号"
                v-model="tempUser.judPassword" required @keyup.enter="login">
            <label for="inputPassword">请输入您的密码</label>
        </div>

        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" value="remember-me" v-model="rememberMe"> 记住密码
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" @click="login"
            :disabled="this.loading">{{this.loginText}}</button>
        <p class="mt-5 mb-3 text-muted text-center">&copy; 双体软件精英产业学院-磐创四部</p>
    </div>
</body>

</html>
<script src="./PwYeMian/vue/vue-2.7.6.min.js"></script>
<script src="./PwYeMian/vue/axios.min.js"></script>
<script src="./PwYeMian/element/index.js"></script>
<script src="./PwYeMian/assets/js/constants.js"></script>
<script>
    let http = axios.create({
        baseURL: baseURL,
        timeout: 5000
    });

    let app = new Vue({
        el: "#app",
        data: {
            user: {},
            tempUser: {}, // 新增临时对象
            loading: false,
            loginText: "登录",
            rememberMe: false // 新增记住密码选项
        },
        methods: {
            async login() {
                this.loading = true;
                this.loginText = "登录中";
                let countdown = 3; // 倒计时时间（秒）
                let countdownInterval;
                if(this.tempUser.judUsername === undefined || this.tempUser.judUsername === null || this.tempUser.judUsername === "") {
                    this.$message({
                        message: '请输入账号',
                        type: 'error'
                    });
                    this.loading=false
                    this.loginText = "登录";
                    return false
                }
                if(this.tempUser.judPassword === undefined || this.tempUser.judPassword === null || this.tempUser.judPassword === "") {
                    this.$message({
                        message: '请输入密码',
                        type: 'error'
                    });
                    this.loading=false
                    this.loginText = "登录";
                    return false
                }
                if(this.tempUser.judUsername.length < 4 || this.tempUser.judUsername.length>12) {
                    this.$message({
                        message: '账号长度为4-12',
                        type: 'error'
                    });
                    this.loading=false
                    this.loginText = "登录";
                    return false
                }
                if(this.tempUser.judPassword.length < 6|| this.tempUser.judPassword.length>18) {
                    this.$message({
                        message: '密码长度为6-18',
                        type: 'error'
                    });
                    this.loading=false
                    this.loginText = "登录";
                    return false
                }
                // 将临时对象的数据复制到user对象
                this.user.judUsername = this.tempUser.judUsername;
                this.user.judPassword = this.tempUser.judPassword;
                // 创建一个Promise来处理登录逻辑
                const loginPromise = new Promise((resolve, reject) => {
                    if (this.user.judUsername === undefined || this.user.judPassword === undefined) {
                        this.$message({
                            message: '用户名和密码不能为空，请重新输入',
                            type: 'error'
                        });
                        resolve(false); // 立即结束
                        return;
                    }
                    //编码bsae64编译器双向创建新对象
                    let postUser = {};
                    postUser.judUsername = btoa(this.user.judUsername);
                    postUser.judPassword = btoa(this.user.judPassword);
                    http.post('/judge/login', postUser).then(res => {
                        console.log("login result: ", res.data);
                        if (res.data.code === 1) {
                            let curUser = res.data.data;
                            localStorage.setItem("user", JSON.stringify(curUser));
                            if (curUser.judRole.toString() === '0') {
                                location.href = "/index.html#/layout";
                            }
                            if (curUser.judRole.toString() === '1') {
                                location.href = "/PwYeMian/judger.html";
                            }
                            // 判断是否勾选记住密码
                            if (this.rememberMe) {
                                // 将用户信息存储在localStorage中
                                localStorage.setItem("rememberedUser", JSON.stringify({"ac":postUser.judUsername,"pw":postUser.judPassword}));
                            }else{
                                // 清除localStorage中的用户信息
                                localStorage.removeItem("rememberedUser");
                            }


                        } else {
                            this.$message({ showClose: true, message: '用户名或密码错误', type: 'warning' });
                            resolve(false);
                        }
                        resolve(true);
                    }).catch(() => {
                        this.$message({ showClose: true, message: '用户名或密码错误', type: 'warning' });
                        resolve(false);
                    });
                });

                const startCountdown = () => {
                    countdownInterval = setInterval(() => {
                        if (countdown > 0) {
                            this.loginText = `登录失败 (${countdown}s)`;
                            countdown--;
                        } else {
                            clearInterval(countdownInterval);
                            this.loginText = '登录';
                            this.loading = false;
                        }
                    }, 1000);
                };

                // 等待登录Promise完成
                const result = await loginPromise;

                // 如果登录失败，启动3秒倒计时
                if (!result) {
                    countdown = 3;
                    startCountdown();
                } else {
                    // 登录成功，立即停止倒计时
                    if (countdownInterval) {
                        clearInterval(countdownInterval);
                    }
                    this.loading = false;
                }
            }
        },
        mounted() {
            // 页面加载时检查localStorage中是否有记住的用户信息
            const rememberedUser = JSON.parse(localStorage.getItem("rememberedUser"));
            // console.log("保存的账号密码",atob(rememberedUser.ac),atob(rememberedUser.pw))// 有数据，数据正常
            this.tempUser.judUsername = atob(rememberedUser.ac);
            this.tempUser.judPassword = atob(rememberedUser.pw);
            // 勾选记住密码复选框
            this.rememberMe = true;
    }});
</script>